/* Header
--------------------------*/
$--header-padding: 0 20px !default;

/* Footer
--------------------------*/
$--footer-padding: 0 20px !default;

/* Main
--------------------------*/
$--main-padding: 0 20px !default;

/** Color
---------------------------*/
$--color-primary: #409eff !default;
$--color-white: #ffffff !default;
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; // 53a8ff
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; // 66b1ff 
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; // 79bbff 
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; // 8cc5ff 
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; // a0cfff 
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; // b3d8ff 
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; // c6e2ff 
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; // d9ecff 
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; // ecf5ff 
// 辅助色
$--color-success: #67c23a !default; // 成功颜色
$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
$--color-warning: #e6a23c !default; // 警告颜色
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
$--color-danger: #f56c6c !default; // 危险颜色
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
$--color-info: #909399 !default; // 信息颜色
$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
// 中性色
$--color-text-primary: #303133 !default; // 主要文字
$--color-text-regular: #606266 !default; // 常规文字
$--color-text-secondary: #909399 !default; // 次要文字
$--color-text-placeholder: #c0c4cc !default;  // 占位文字
$--border-color-base: #dcdfe6 !default; // 一级边框
$--border-color-light: #e4e7eD !default; // 二级边框
$--border-color-lighter: #ebeef5 !default; // 三级边框
$--border-color-extra-light: #f2f6fc !default; // 四级边框

/** Typography
-------------------------------*/
$--font-path: 'fonts'; // 字体路径
$--font-size-extra-large: 20px !default; // 主标题
$--font-size-large: 18px !default; // 标题
$--font-size-medium: 16px !default; // 小标题
$--font-size-base: 14px !default; // 正文
$--font-size-small: 13px !default; // 正文（小）
$--font-size-extra-small: 12px !default; // 正文（小）
$--font-weight-primary: 500 !default; // 字体加粗

/** Border
----------------------------*/
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-base: 1px solid $--border-color-base !default;
$--border-radius-base: 4px !default; // 大圆角
$--border-radius-small: 2px !default; // 小圆角
$--border-radius-zero: 0 !default; // 无圆角
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, .1) !default;

/** Button
-----------------------------*/
$--button-padding-vertical: 12px !default;
$--button-padding-horizontal: 20px !default;
$--button-font-size: $--font-size-base !default;
$--button-font-weight: $--font-weight-primary !default;
$--button-border-radius: $--border-radius-base !default;

$--button-default-background-color: $--color-white !default; // #fff
$--button-default-border-color: $--border-color-base !default; // #dcdfe6
$--button-default-font-color: $--color-text-regular !default; // #606266

$--button-primary-background-color: $--color-primary !default; // #4093ff
$--button-primary-border-color: $--color-primary !default; // #4093ff
$--button-primary-font-color: $--color-white !default; // #fff 

$--button-success-background-color: $--color-success !default; // #67c23a
$--button-success-border-color: $--color-success !default; // #67c23a
$--button-success-font-color: $--color-white !default; // #fff


$--button-info-background-color: $--color-info !default; //  #909399
$--button-info-border-color: $--color-info !default; //  #909399
$--button-info-font-color: $--color-white !default; // #fff

$--button-warning-background-color: $--color-warning !default; // e6a23c
$--button-warning-border-color: $--color-warning !default; // e6a23c
$--button-warning-font-color: $--color-white !default; // #fff

$--button-danger-background-color: $--color-danger !default; // #f56c6c
$--button-danger-border-color: $--color-danger !default; // #f56c6c
$--button-danger-font-color: $--color-white !default; // #fff

$--button-active-shade-percent: 10% !default;
$--button-hover-tint-percent: 20% !default;


/* Break Point
--------------------------*/
$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;

$--breakpoints: (
  'xs': (max-width: $--sm - 1),
  'sm': (min-width: $--sm),
  'md': (min-width: $--md),
  'lg': (min-width: $--lg),
  'xl': (min-width: $--xl),
);

$--breakpoints-spec: (
  'xs-only': (max-width: $--sm - 1),
  'sm-and-up': (min-width: $--sm),
  'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md -1})',
  'sm-and-down': (max-width: $--md - 1),
  'md-and-up': (min-width: $--md),
  'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg -1})',
  'md-and-down': (max-width: $--lg - 1),
  'lg-and-up': (min-width: $--lg),
  'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
  'lg-and-down': (max-width: $--xl - 1),
  'xl-only': (min-width: $--xl),
)